<template>
  <section>
    <img src="../imgs/Rectangle5拷贝.png" alt="" class="imgs1" />
    <img src="../imgs/正文区域.png" alt="" class="imgs2" />
  </section>
  <figure>
    <div class="LogEsc">
      <div  class="Left">
        <h2 @click="onLogin">{{ nikName }}</h2>
      </div>
      <div class="Right">
        <i @click="show = true">
          <img src="../imgs/签到(2).png" alt="" />
        </i>
        <i @click="shows = true">
          <img src="../imgs/编辑(1).png" alt="" />
        </i>
        <i @click="showss = true">
          <img src="../imgs/205设置-线性.png" alt="" />
        </i>
      </div>
    </div>
    <div class="oneFirst">
      <p>愿每一个房间得以满意</p>
    </div>
    <div class="Meg">
      <div class="header">
        <img :src="newImg" alt="" class="img" />
      </div>
      <div class="broken">
        <ul>
          <li>
            <i>积分</i>
            <em>0</em>
          </li>
          <li>
            <i>红包</i>
            <em>1</em>
          </li>
          <li>
            <i>余额</i>
            <em>￥0</em>
          </li>
        </ul>
      </div>
    </div>
    <cell is-link title="发布房源" @click="show2 = !show2" v-if="hidden" />
    <action-sheet v-model:show="show2" title="房屋介绍">
      <ul class="jie">
        <li><i>民宿名称：</i><input type="text" v-model="name" /></li>
        <li><i>民宿主题：</i><input type="text" v-model="theme" /></li>
        <li><i>民宿简介：</i><textarea name="" id="" cols="30" rows="10" v-model="Introduction"></textarea></li>
        <li><i>房屋类型：</i><input type="text" v-model="type" /></li>
        <li><i>价格：</i><input type="text" v-model="price" /></li>
        <li><i>学生特价：</i><input type="text" v-model="StudentSpecials" /></li>
        <li><i>地区：</i><input type="text" v-model="area" /></li>
        <li><i>城市：</i><input type="text" v-model="city" /></li>
        <li><i>入住最大人数：</i><input type="text" v-model="maxNumber" /></li>
        <li><button @click="release">发布</button></li>
      </ul>
    </action-sheet>
    <div class="Order" v-if="flog">
      <div class="top">
        <h4>我的订单</h4>
        <h5>全部订单></h5>
      </div>
      <div class="bottom">
        <ul>
          <li>
            <img src="../imgs/支付钱包待支付.png" alt="" />
            <p>待支付</p>
          </li>
          <li>
            <img src="../imgs/3.1待发货.png" alt="" />
            <p>进行中</p>
          </li>
          <li>
            <img src="../imgs/消息1.png" alt="" />
            <p>待点评</p>
          </li>
          <li>
            <img src="../imgs/3.1退款退货.png" alt="" />
            <p>待退款</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="last" v-show="flog">
      <ul>
        <li>
          <img src="../imgs/收藏(7).png" alt="" />
          <p>收藏</p>
        </li>
        <li>
          <img src="../imgs/内容管理(1).png" alt="" />
          <p>内容管理</p>
        </li>
        <li>
          <img src="../imgs/提前入住.png" alt="" />
          <p>入住信息</p>
        </li>
        <li>
          <img src="../imgs/学生(1).png" alt="" />
          <p>学生认证</p>
        </li>
        <li>
          <img src="../imgs/云安全.png" alt="" />
          <p>安全中心</p>
        </li>
        <li>
          <img src="../imgs/144反馈、意见反馈-线性.png" alt="" />
          <p>意见反馈</p>
        </li>
      </ul>
    </div>
    <button @click="toggle" v-show="user">{{ ff }}</button>
  </figure>
  <popup v-model:show="show">
    <template #default>
      <Button type="success" @click="sig">签到开始全新的一天🥳</Button>
    </template>
  </popup>
  <!-- 个人信息修改 -->
  <popup v-model:show="shows" position="bottom" :style="{ height: '50%' }">
    <template #default>
      <uploader v-model="files" /><br />
      <i style="display: inline-block; width: 120px; line-height: 30px">昵称：</i><input type="text" v-model="nicknames" /> <br />
      <i style="display: inline-block; width: 120px; line-height: 30px">地区：</i><input type="text" v-model="areas" /> <br />
      <i style="display: inline-block; width: 120px; line-height: 30px">城市：</i><input type="text" v-model="citys" /> <br />
      <i style="display: inline-block; width: 120px; line-height: 30px">个人介绍：</i><input type="text" v-model="intros" /> <br />
      <i style="display: inline-block; width: 120px; line-height: 30px">生日：</i><input type="text" v-model="birthdays" /><br />
      <i style="display: inline-block; width: 120px; line-height: 30px">性别:</i><input type="text" v-model="sexs" /><br />
      <Button block size="large" type="success" @click="fileImg">确认修改</Button>
    </template>
  </popup>
  <!-- 设置 -->
  <popup v-model:show="showss" position="right" :style="{ width: '80%', height: '100%' }">
    <template #default>
      <cell title="选择单个日期" is-link :value="date" @click="showsss = true" />
      <calendar v-model:show="showsss" @confirm="onConfirm" />
      <Button type="primary" size="large" to="login">退出登录</Button>
      <!-- <sidebar v-model="active">
        <sidebar-item title="设置" />
        <sidebar-item title="点不开" />
        <sidebar-item title="真的点不开" />
        <sidebar-item title="你可以试试" />
      </sidebar> -->
    </template>
  </popup>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { getTokenUser } from '../utils/api.js'
import { ActionSheet, Cell, Button, Popup, Notify, Uploader, Calendar, Sidebar, SidebarItem, Toast } from 'vant'
import { Release, SignIn, uploadFiles, UseUpdate } from '../utils/api.js'
import router from '../router';
// import qs from 'qs'
// 头像存储
const newImg = ref()
const user = ref(true)
const flog = ref(true)
const show2 = ref(false)
const hidden = ref(false)
// 发布内容
const name = ref()
const theme = ref()
const Introduction = ref()
const imgFile = ref('')
const type = ref()
const price = ref()
const StudentSpecials = ref()
const area = ref()
const city = ref()
const maxNumber = ref()
const MyFile = ref()


// 获取用户信息
const msgss = ref()
GetUser()
function GetUser() {
  getTokenUser().then((res) => {
    msgss.value = res.data
    sessionStorage.setItem('userMsg', JSON.stringify(res.data))
    newImg.value = res.data?.avatar
  })
}
// 计算属性
const ff = computed(() => {
  return flog.value === true ? '切换为房东' : '切换为用户'
})
const nikName = computed(() => {
  let useToken = sessionStorage.getItem('token')
  return useToken ? '你好，' + msgss.value?.nickname : '登录/注册'
})
const onLogin = ()=>{
  let useToken = sessionStorage.getItem('token')
  if(!useToken){
    console.log(1)
    router.push({
    name: "Login",
  });
  }
}
// 点击切换
const toggle = () => {
  flog.value = !flog.value
  hidden.value = !hidden.value
}
// 发布按钮（未写完）
const release = async () => {
  let data = await Release('/api/homestays/insert', {
    homestaysName: name.value,
    homestaysTitle: theme.value,
    intro: Introduction.value,
    roomType: type.value,
    price: price.value,
    stuPrice: StudentSpecials.value,
    area: area.value,
    city: city.value,
    personNumber: maxNumber.value,
  })
  if (data.code === 200) {
    Toast({
      type: 'success',
      message: '发布成功',
    })
  }
}
// 签到
const show = ref(false)
const sig = () => {
  SignIn().then((res) => {
    if (res.msg === '已签到，签到失败') {
      Notify(res.msg)
    } else {
      Notify({
        message: res.msg,
        type: 'success',
      })
    }
  })
}
// 修改
const shows = ref(false)
const files = ref()
// 信息
const nicknames = ref()
const areas = ref()
const citys = ref()
const intros = ref()
const birthdays = ref()
const sexs = ref()
const fileImg = () => {
  let formData = new FormData()
  files.value?.forEach((item) => {
    formData.append('file', item.file)
  })
  uploadFiles(formData).then((res) => {
    console.log(res)
    if (res.code === 200) {
      newImg.value = res.data
    }
  })
  // error
  UseUpdate('/api/member/update01', {
    nickname: 1,
    area: 1,
    city: 1,
    intro: 1,
    birthday: 1,
    sex: 1,
  }).then((res) => {
    console.log(res)
  })
}
// 设置
const showss = ref(false)
const date = ref('')
const showsss = ref(false)
const active = ref(0)
const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`
const onConfirm = (value) => {
  showsss.value = false
  date.value = formatDate(value)
}
</script>
<style lang="scss">
html,
body,
#app {
  width: 100%;
  height: 100%;
}
@mixin Tong() {
  width: 90%;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  margin: 1.2rem;
  background-color: #fff;
  border-radius: 0.625rem;
  height: 7.5rem;
}
section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .imgs1 {
    width: 110%;
    height: auto;
    flex: auto;
  }
  .imgs2 {
    width: 110%;
    flex: auto;
    height: auto;
    margin-top: -5.625rem;
  }
}
figure {
  position: absolute;
  width: 100%;
  top: 0;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 120px;
    height: 120px;
    background-color: #fff;
    border-radius: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .van-action-sheet__item {
    width: auto;
  }
  .van-popup__close-icon {
    font-size: 1.875rem;
    margin-top: -0.375rem;
  }
  .van-cell {
    top: 0.625rem;
    background-color: rgba($color: #fff, $alpha: 0);
    font-size: 1.2rem;
  }
  h1 {
    color: deeppink;
    padding: 0.625rem;
    opacity: 0.7;
  }
  .Pops {
    background-color: rgba($color: #000000, $alpha: 0);
  }
  .jie {
    li {
      display: flex;
      gap: 0.625rem;
      i {
        font-style: normal;
        width: 7.5rem;
      }
      input,
      textarea {
        flex: 1;
      }
    }
  }
  .LogEsc {
    display: flex;
    padding: 0 1rem;
    margin-top: 2.5rem;
    .Left {
      flex: 1;
      h2 {
        font-weight: 400;
        font-size: 1.5rem;
        color: #fff;
      }
    }
    .Right {
      flex: 1;
      display: flex;
      gap: 0.9375rem;
      justify-content: end;
      align-items: center;
      i {
        display: flex;
        width: 1.25rem;
        height: 1.25rem;
      }
    }
  }
  .oneFirst {
    padding: 0 1rem;
    margin-top: 1.5625rem;
    p {
      color: #fff;
      font-size: 1rem;
    }
  }
  .Meg {
    display: flex;
    width: 100%;
    padding: 0 1rem;
    justify-content: center;
    align-items: center;
    .header {
      width: 6.25rem;
      height: 6.25rem;
      border-radius: 50%;
      box-shadow: 1px 1px 25px black;
      overflow: hidden;
      margin-top: 4.5625rem;
      .img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .broken {
      flex: 1;
      margin-top: 6.25rem;
      ul {
        display: flex;
        height: 100%;
        li {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          flex: 1;
          i {
            font-style: normal;
          }
          em {
            font-style: normal;
            font-weight: 700;
            font-size: 1.2rem;
          }
        }
      }
    }
  }
  .Order {
    @include Tong();
    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      h4,
      h5 {
        flex: 1;
        text-align: right;
        font-weight: 400;
        margin-top: 0.9375rem;
      }
      h4 {
        text-align: left;
        font-weight: 700;
      }
    }
    .bottom {
      width: 100%;
      margin-top: 0.625rem;
      ul {
        display: flex;
        li {
          display: flex;
          flex-direction: column;
          flex: 1;
          justify-content: center;
          align-items: center;
          gap: 0.625rem;
          img {
            width: 35%;
          }
          p {
            font-size: 0.8rem;
          }
        }
      }
    }
  }
  .last {
    @include Tong();
    height: auto;
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 6.25rem;
        height: 6.25rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        img {
          width: 30%;
        }
        p {
          font-size: 0.8rem;
        }
      }
    }
  }
  button {
    width: 80%;
    height: 3.125rem;
    border: none;
    background: linear-gradient(0deg, #ddedf3, #e1edf2);
    border-radius: 1.5625rem;
    margin: 1.5rem calc(50% - 40%);
    font-weight: 700;
  }
}
</style>
